<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>信息查询</title>
    <link rel="shortcut icon" href="#"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"/>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        /*高度自适应*/
        $(document).ready(function() {
            initLayout();
            $(window).resize(function(){
                initLayout();
            });
        });
        function initLayout() {
            // $('#wrapper').width(document.documentElement.clientWidth - $("#left").width()-2);
            var h = document.documentElement.clientHeight - 15;
            $('#wrapper').height(h);
        }
        /*密码添加或查询切换*/
        function checkAction(action) {
            if ('save' == action){
                $(".save").attr('style','background: #2b91e3; color: white');
                $(".get").attr('style','');
                $(".all").attr('style','');
                $('.getAll').attr('style','display:none');
                $(".savePassword").attr('style','display: block');
                $(".getPassword").attr('style','display: none');
                $(".allPassword").attr('style','display: none');
            }
            if ('get' == action){
                $(".get").attr('style','background: #2b91e3; color: white');
                $(".save").attr('style','');
                $(".all").attr('style','');
                $('.getAll').attr('style','display:none');
                $(".getPassword").attr('style','display: block');
                $(".savePassword").attr('style','display: none');
                $(".allPassword").attr('style','display: none');
            }
            if ('all' == action){
                $('.allList').remove();
                $(".all").attr('style','background: #2b91e3; color: white');
                $(".save").attr('style','');
                $(".get").attr('style','');
                $(".allPassword").attr('style','display: block');
                $(".savePassword").attr('style','display: none');
                $(".getPassword").attr('style','display: none');
                $('.getAll').attr('style','display:none');
                let userName = $(".userName").val();
                let miShi = $(".miShi").val();
                if ('' == userName || '' == miShi){
                    $('.getAll').attr('style','display:block');
                }else{
                    getAllPassword();
                }
            }
        }
        /*导航*/
        function navAction(action) {
            if ('telephone' == action){
                $('.password').attr('style','display:none');
                $('.tel').attr('style','display:block');
            }
            if ('password' == action){
                $('.password').attr('style','display:block');
                $('.tel').attr('style','display:none');
            }
        }
        /*保存密码*/
        function savePassword() {
            let describe = $(".describe").val();
            let password = $(".passwordInfo").val();
            let userName = $(".userName").val();
            let miShi = $(".miShi").val();
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/search/password/savePassword",
                data: {
                    describe: describe,
                    password: password,
                    userName: userName,
                    miShi: miShi
                },
                success: function (result) {
                    if (result.returnCode == "0000"){
                        alert(result.returnMsg)
                    }else {
                        alert(result.returnMsg);
                    }
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
        /*查询密码*/
        function getPassword() {
            $('.resList').remove();
            let condition = $(".condition").val();
            let userName = $(".userName").val();
            let miShi = $(".miShi").val();
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "/search/password/getPassword",
                data: {
                    miShi: miShi,
                    userName: userName,
                    condition: condition
                },
                success: function (result) {
                    $('.getPassword').append('<dev class="resList"></div>');
                    if (result.returnCode == "0000"){
                        let beans = result.beans;
                        let str = "";
                        beans.forEach(function (bean,index) {
                            let des = bean.des;
                            let password = bean.pword;
                            str = des + '：' + '<input class="result" type="text" value=" ' + password +'"><br/>';
                            $('.resList').append(str)
                        })
                        /*$(".result").attr('style','display: block');
                        $(".result").val(passowrd);*/
                    }else {
                        alert("查询失败！！" + result.returnMsg);
                    }
                },
                error : function() {
                    alert("异常！");
                }
            });
        }
        /*查询所有密码*/
        function getAllPassword() {
            $('.allList').remove();
            let userName = $(".userName").val();
            let miShi = $(".miShi").val();
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "/search/password/getAllPassword",
                data: {
                    miShi: miShi,
                    userName: userName,
                },
                success: function (result) {
                    $('.allPassword').append('<dev class="allList"></div>');
                    if (result.returnCode == "0000"){
                        let beans = result.beans;
                        let str = "";
                        beans.forEach(function (bean,index) {
                            let des = bean.des;
                            let password = bean.pword;
                            str = '<div>' + des + '：' + '<input class="result" type="text" value=" ' + password +'"><button class="delete" wordId="' + bean.id + '">删除</button><br/></div>';
                            $('.allList').append(str);
                            $('.allList').find("button").each(function (index,item) {
                                $(item).click(function () {
                                    let that = $(this);
                                    let wordId =$(this).attr("wordId");
                                    $.ajax({
                                        type: "POST",
                                        dataType: "json",
                                        url: "/search/password/deletePassword",
                                        data: {
                                            wordId: wordId
                                        },
                                        success: function (result) {
                                            if (result.returnCode == "0000"){
                                                that.parent().remove();
                                                alert(result.returnMsg);
                                            }else {
                                                alert("删除失败！！" + result.returnMsg);
                                            }
                                        },
                                        error : function() {
                                            alert("异常！");
                                        }
                                    });
                                })
                            })
                        })
                        /*$(".result").attr('style','display: block');
                        $(".result").val(passowrd);*/
                    }else {
                        alert("查询失败！！" + result.returnMsg);
                    }
                },
                error : function() {
                    alert("异常！");
                }
            });
        }

        /*删除*/
        function deletePassword(wordId) {

        }
    </script>
    <style>
        #wrapper{
            position: relative;
            /*height: 500px;*/
        }
        li{
            list-style: none;
        }
        .bottom, .savePassword, .getPassword {
            border: 1px solid black;
            border-radius: 5%;
            padding: 20px 5px;
            margin-top: 10px;
        }
        .bottom input{
            width: 60%;
        }
        .top .get{
            float: left;
            margin-left: 13%;
        }
        .top .save{
            float: left;
            /*margin-left: 5%;*/
            margin-left: 20px;
        }
        .top .all{
            float: left;
            /*margin-left: 30%;*/
            margin-left: 20px;
        }
        .bottom .getAll{
            float: right; width: 50px;
        }
        .allList .delete{
            width: 40px;
            background-color: red;
            color: white;
        }
        .allList .delete:hover{
            cursor: pointer;
        }
        .getPassword .resList{}
        .getPassword .resList .result{
            position: relative;
            left: 0;
            /*margin-left: 26%;*/
            text-align: center;
            /*border: 1px solid black;*/
        }
        .title{
            /*background-color: blue;*/
            width: 40%;
            text-align: center;
            color: black;
            margin: 0 auto;
            margin-bottom: 10px;
        }
        #wrapper .password{
            position: absolute;
            width: 100% ;
            top: 0;
            /*border: 1px solid blue;*/
        }
        #wrapper .tel{
             position: absolute;
             width: 100% ;
             top: 0;
             /*border: 1px solid blue;*/
             display: none;
         }
        #wrapper .nav{
            width: 100%;
            position: absolute;
            /*border: 1px solid red;*/
            height: 30px;
            bottom: 0;
            text-align: center;
        }
        #wrapper .nav button{
            float: left;
            width: 25%;
        }
       /* .savePassword{
            border: 1px solid black;
            border-radius: 5%;
            padding: 20px 5px;
            margin-top: 10px;
        }*/
    </style>
</head>
<body>
   <div id="wrapper">
       <!--密码查询-->
       <div class="password">
           <h2 class="title">密码查询</h2>
           <div class="top">
               <button style="background: #2b91e3; color: white;" onclick="checkAction('get')" class="get">查询密码</button>
               <button style="" onclick="checkAction('save')" class="save">保存密码</button>
               <button style="" onclick="checkAction('all')" class="all">查询所有</button>
               <br clear="both">
           </div>
           <div class="bottom">
               账户：<input type="text" class="userName" placeholder="请输入账户 (必填)"><br><br>
               密匙：<input type="text" class="miShi" placeholder="请输入密匙 (必填，避免外泄)">
               <input type="button" class="getAll" onclick="getAllPassword()" value="提交" style="display: none;">
           </div>
           <div class="getPassword">
               查询条件：<input type="text" class="condition" placeholder="请输入密码内容">
               <input type="button" onclick="getPassword()" value="提交" style="float: right"><br style="clear: both;">
<!--               <input type="text" class="result" style="display: none;">-->
               <div class="resList"></div>
           </div>
           <!--保存密码-->
           <div class="savePassword" style="display: none;">
               密码名称：<input type="text" class="describe" placeholder="请输入详细名称"><br><br>
               密码内容：<input type="text" class="passwordInfo" placeholder="请输入密码内容">
               <input type="button" onclick="savePassword()" value="提交" style="float: right"><br style="clear: both;">
           </div>
           <!--查询所有密码-->
           <div class="allPassword">
               <div class="allList"></div>
           </div>
       </div>
       <!--手机绑定-->
       <div class="tel">
           <h2 class="title">手机绑定</h2>
       </div>
       <!--导航栏-->
       <div class="nav">
           <button onclick="navAction('password')">密码查询</button>
           <button onclick="navAction('telephone')">手机绑定</button>
           <button>密码查询</button>
           <button>密码查询</button>
       </div>
   </div>
</body>
</html>